<template>
  <div id="app" class="grey-sample-pos">
    <!-- 头部导航 -->
    <van-nav-bar ref="header" title="坯布盘头样存放" left-arrow @click-left="comeBack" left-text="返回" >
      <template #right>
        <span @click="openScanToPosWinFn"><van-icon name="scan" size="20" /></span>
      </template>
    </van-nav-bar>
    <van-cell title="默认区域" is-link :value="scanParam.no" @click="showPosPopupFn"></van-cell>

    <!-- 总计 -->
    <van-cell class="outbound-list__total" v-show="detailData.length !== 0" :title="'总样品数'" :value="detailData.length"></van-cell>

    <!-- 滚动 -->
    <better-scroll class="public-scroll" :data="detailData" :pulldown="true">
      <van-row v-for="detail in detailData" style="padding:1rem;border-bottom: 1px solid #263c6b">
        <van-col :span="6">
          <van-image width="5rem" height="5rem" fit="fill" :src="detail.firstPic" @click="showPicPreViewFn(detail)">
            <template v-slot:error>加载失败</template>
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-col>
        <van-col :span="18" style="padding-left:1rem;">
          <div style="display: flex; justify-content: space-between;padding-bottom: 0.5rem;">
            <span>{{detail.designNo}}</span>
            <span>{{detail.craftId}}</span>
          </div>
          <div style="display: flex; justify-content: space-between;padding-bottom: 0.5rem;">
            <span>{{ detail.no }}</span>
            <span>{{ detail.opererName }}</span>
          </div>
          <div style="display: flex; justify-content: flex-end;">
            <span>{{ detail.operateAt }}</span>
          </div>
        </van-col>
      </van-row>

      <van-cell-group v-show="detailData.length !== 0">
        <div v-for="data in detailData" :key="data.id">
        </div>
      </van-cell-group>
      <van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" v-show="detailData.length === 0" description="暂无数据" />
    </better-scroll>

    <!-- 位置弹窗 -->
    <van-popup v-model="showPosPopup" position="bottom">
      <van-picker show-toolbar value-key="no" :columns="posData" :default-index="0" @confirm="selectPosFn" @cancel="showPosPopup = false" />
    </van-popup>

    <!-- 图片预览 -->
    <van-image-preview v-model="showPicPreView" :showIndex="false" :closeable="true" :images="picPreView">
    </van-image-preview>
  </div>
</template>

<script>
import {comeBack} from "@/utils";
import {loadGreySamplePos,scanDetailToPos} from "@/views/cloth/grey-sample-pos/scan-to-pos/main";
import {loadPicsFn} from "@/views/cloth/grey-sample-pos/main";

export default {
  name: "greySampleScanToPos",
  data() {
    return {
      /* 位置相关 */
      showPosPopup: false,
      posData: [],

      /* 扫码相关 */
      scanParam: {
        no: "",
        craftId: 0,
      },

      /* 详情相关 */
      detailData: [],
      showPicPreView: false,
      picPreView: [],
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      }
    }
  },
  methods: {
    comeBack,
    //初始化
    initFn(that) {
      window.api.addEventListener({
        name: "viewdisappear"
      }, function() {
        window.api.closeWin();
      });

      that.loadGreySamplePosFn();
    },

    //加载位置列表
    loadGreySamplePosFn() {
      let that = this;
      that.posData.splice(0, that.posData.length);
      loadGreySamplePos({}, data => {
        data.forEach(pos => {
          that.posData.push(pos);
        });
      });
    },

    //显示图片预览
    showPicPreViewFn(detail) {
      let that = this;
      that.showPicPreView = true;
      that.picPreView.splice(0, that.picPreView.length);
      detail.pics.forEach(pic => {
        that.picPreView.push(pic);
      });
    },

    //显示位置弹窗
    showPosPopupFn() {
      let that = this;
      that.showPosPopup = true;
    },

    //选择位置
    selectPosFn(pos) {
      let that = this;
      that.scanParam.no = pos.no;
      that.showPosPopup = false;
    },

    //扫码到位置
    openScanToPosWinFn() {
      const that = this;
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let content = ret.result;
          if(content.indexOf(",") == -1 || (content.split(",")[0] != "99" && content.split(",")[0] != "98")) {
            that.$toast.fail("不支持的二维码");
            return;
          }
          let tmp = content.split(",");
          if(tmp[0] == 98) {    //扫框码
            that.scanParam.no = tmp[1];
            that.$toast.success({
              duration: 1500,
              message: "当前位置是:" + tmp[1],
              onClose: function() {
                that.openScanToPosWinFn();
              }
            });
          } else if(tmp[0] == 99) {   //扫布码
            if(that.scanParam.no == "") {
              that.$toast.fail("请先扫位置码");
              return;
            }
            that.scanParam.craftId = tmp[1];
            scanDetailToPos(that.scanParam, detail => {
              detail.firstPic = "";
              detail.pics = [];
              loadPicsFn(that, detail);
              that.detailData.push(detail);
              that.$toast.success({
                duration: 1500,
                message: "扫入成功,请继续下一个",
                onClose: function() {
                  that.openScanToPosWinFn();
                }
              });
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.grey-sample-pos {
  .public-scroll {
    height: 70vh;
  }
  .van-search {
    z-index: 1;
  }
}
</style>